<template>
  <div class="goods">
    <div class="goods_title">
      <div class="check">
        <input type="checkbox" @click="checkAll" :checked="isAllcheck"/>
        全选
      </div>
      <div class="goods_name">商品信息</div>
      <div class="goods_entry">市场价</div>
      <div class="goods_entry">店铺价</div>
      <div class="goods_entry">数量</div>
      <div class="goods_entry">操作</div>
    </div>
    <div class="all_item" v-for="(item,index) in carItems" :key="index">
      <div class="goods_cont">
      <div class="goods_item">
        <div class="check">
          <input type="checkbox" v-model="item.checked"/>
        </div>
        <div class="goods_name">
          <a href="#">
            <div>
              <img :src="item.dimg" alt="" />
            </div>
            <p>{{item.dtitle}}</p>
          </a>
        </div>
        <div class="goods_entry">
          <p>
            <del>￥{{item.scj}}</del>
          </p>
        </div>
        <div class="goods_entry">
          <p class="red">￥{{item.dprice}}</p>
        </div>
        <div class="goods_entry">
          <p>1</p>
        </div>
        <div class="goods_entry">
          <img src="../assets/delete.svg" class="pointer" alt="" @click="del" :data-i="index"/>
        </div>
      </div>
      </div>
    </div>
    <div class="goods_set">
        <div class="check"></div>
        <div class="goods_name">
          <button class="red" @click="Idel">删除</button>
        </div>
        <div class="goods_entry">共{{count}}件商品</div>
        <div class="goods_entry jg">
          应付金额
          <span>￥{{total}}</span>
        </div>
        <div class="goods_entry">
          <button class="js">结算</button>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // carItems初次设置必须为空数组    否则后续使用可能报错
      carItems:[],
      checkall:false,
      ischeck:false
    }
  },
  mounted () {
    let carItems=JSON.parse(localStorage.getItem('carItems'))
    carItems.map(val=>{
      val.checked=false
    })
    console.log(carItems);
    this.carItems=carItems
  },
  methods:{
    // 全选选中   单选全部变化
    checkAll(e){
      let check=e.target.checked
      this.carItems.forEach(val=>{
        val.checked=check
      })
      console.log(this.carItems);
    },
    // 后 小图标 删除购物车
    del(e){
      console.log(e.target.dataset.i);
      let i=e.target.dataset.i
      // 获取时   要解析 JSON 格式   调用JSON.parse
      var carItems = JSON.parse(localStorage.getItem('carItems'));    
      carItems.splice(i, 1);
      // 存localStorage时 必须存为 json格式   调用 JSON.stringify方法
      localStorage.setItem('carItems', JSON.stringify(carItems));
      location.reload()
    },
    // 删除按钮根据 input 删购
    Idel(){
      //  console.log(this.carItems)
      for(var i=0;i<this.carItems.length;i++){
        if(this.carItems[i].checked){
          this.carItems.splice(i,1)
          localStorage.setItem('carItems', JSON.stringify(this.carItems));
          i=-1
          // location.reload()
        }
      }
    }
  },
  computed:{
    // 查看每个单选的状态   如果全为 true  则全选按钮要变 true 
    // 计算属性里的方法   在上部调用 不写()
    isAllcheck(){
      return this.carItems.every(val=>{
        // 全为 true 则返回true   全为false  则就是false
        return val.checked
      })
    },
    // 总计   也是直接写名字调用  不加()
    total(){
      return this.carItems.reduce((sum,val)=>{
        const { dprice,checked }=val
        // 选中就 加  没选中就不加  利用checked 的 0 1
        return sum+dprice*checked
      },0)
    },
    //总数量
    count(){
      return this.carItems.reduce((sum,val)=>{
        return sum+val.checked
      },0)
    }
  }
};
</script>

<style lang="scss" scoped>
  .goods{
    background-color: #f5f5f5;
    padding: 20px 0;
    >div{
      background-color: #fff;
      padding:5px;
      text-align: center;
      color: #333;
    }
  }
  div.goods_title{
    background-color: #ccc;
  }
  div.goods_cont{
    height: 83px;
    .goods_item{
      height: 83px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      border-bottom: 1px dashed #ccc;
    }
  }
  div.goods_set{
    margin-top: 10px;
    height: 74px;
    line-height: 74px;
  }
  .check{
    width: 100px;
    display: inline-block;
  }
  .goods_name{
    width: 400px;
    display: inline-block;
    text-align: start;
    a{
      color: #333;
      display: flex;
      margin-top: 5px;
      >div{
        width: 70px;
        height: 70px;
        border: 1px solid #ccc;
        >img{
          width: 100%;
        }
      }
      >p{
        margin-left: 30px;
      }
    }
    a:hover{
      color: #804e22;
    }
    button.red{
      width: 115px;
      height: 32px;
      background-color: #f22;
      color: #fff;
      padding: 5px 0;
      border: 0;
    }
    
  }
  .goods_entry{
    width: 115px;
    display: inline-block;
    del{
      color: #999;
    }
    p.red{
      color: #f22;
    }
    button.js{
      width: 115px;
      height: 34px;
      background-color: #884e22;
      color: #fff;
      border: 0;
    }
    img.pointer{
      cursor: pointer;
    }
  }
  div.jg{
    width: 230px;
  }
 
</style>